<template>
	<view class="content">
		<view class="gradient-bg">
			<view class="flex-row-between" style="margin-bottom: 8rpx;">
				<!-- <view class="flex-row">
					<text class="white-text font-24">单据编号</text>
					<text class="white-text font-24" style="margin-left: 20rpx;">{{option.checkDetailNo}}</text>
				</view> -->
			</view>
			
			<scroll-view scroll-x class="table-wrap">
				<view class="table">
					<view class="table-header">
						<view class="th" style="width: 80rpx;">序号</view>
						<view class="th" style="width: 140rpx;">托盘</view>
						<view class="th" style="width: 180rpx;">物料编号</view>
						<view class="th" style="width: 180rpx;">物料名称</view>
						<view class="th" style="width: 140rpx;">批次</view>
						<view class="th" style="width: 120rpx;">数量</view>
						<view class="th" style="width: 120rpx;">单位</view>
						<view class="th" style="width: 140rpx;">实际数量</view>
						<view class="th" style="width: 180rpx;">差异说明</view>
					</view>
					
					<view v-if="detailData.length > 0" class="table-body">
						<view class="tr" v-for="(item, index) in detailData" :key="index">
							<view class="td" style="width: 80rpx;">{{index + 1}}</view>
							<view class="td" style="width: 140rpx;">{{item.trayNo || '--'}}</view>
							<view class="td" style="width: 180rpx;">{{item.productNo}}</view>
							<view class="td" style="width: 180rpx;">{{item.productName}}</view>
							<view class="td" style="width: 140rpx;">{{item.batchNo}}</view>
							<view class="td" style="width: 120rpx;">{{item.stockQty}}</view>
							<view class="td" style="width: 120rpx;">{{item.productUnit}}</view>
							<view class="td input-cell" style="width: 140rpx;">
								<input 
									type="number" 
									v-model="item.checkQty"
									class="qty-input"
									placeholder="请输入"
								/>
							</view>
							<view class="td input-cell" style="width: 180rpx;">
								<input 
									type="text"
									v-model="item.diffDesc"
									class="text-input"
									placeholder="请输入说明"
								/>
							</view>
						</view>
					</view>
					<view v-else class="empty-state">
						<!-- <image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image> -->
						<text class="empty-text">暂无数据</text>
					</view>
				</view>
			</scroll-view>

			<view @click="handleDispatch" class="botton p-botton font-30" :class="{'disabled': !detailData.length}" style="height: 92rpx; line-height:92rpx;margin: 50rpx 25rpx;">
				盘 点
			</view>
		</view>
		
		<!-- 输入弹窗 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog 
				mode="input" 
				title="请输入实际数量" 
				:value="currentValue"
				placeholder="请输入数量"
				@confirm="handleInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		queryCheckDetailInfos,
		checkComplete
	} from "./api"

	export default {
		data() {
			return {
				detailData: [],
				currentValue: '',
				currentRow: null
			}
		},
		onLoad(option) {
			this.option = option;
			this.getTaskDetail();
		},
		methods: {
			getTaskDetail() {
				queryCheckDetailInfos(this.option).then(res => {
					if (res.code == 200) {
						this.detailData = res.data.map(item => ({
							...item,
							checkQty: item.checkQty || '',
							diffDesc: item.diffDesc || ''
						}))
					}else{
						this.detailData = []
					}
				})
			},
			handleCellClick(row, column, index) {
				// 只有点击实际数量列才弹出输入框
				if (column.name === 'checkQty') {
					this.currentRow = row;
					this.currentValue = row.checkQty;
					this.$refs.inputDialog.open();
				}
			},
			handleInputConfirm(value) {
				if (this.currentRow) {
					this.currentRow.checkQty = value;
					this.$refs.inputDialog.close();
				}
			},
			validateData() {
				if (!this.detailData.length) {
					this.$modal.confirmClose('暂无数据可盘点');
					return false;
				}
				const emptyItems = this.detailData.filter(item => !item.checkQty);
				if (emptyItems.length > 0) {
					const itemNames = emptyItems.map((item, index) => {
						return `第${index + 1}行: ${item.productName}(${item.productNo})`;
					});
					this.$modal.confirmClose(`以下物料未填写实际数量：\n${itemNames.join('\n')}`);
					return false;
				}
				return true;
			},
			handleDispatch() {
				if (!this.validateData()) return;
				
				this.$modal.confirm('确定盘点？').then(() => {
					this.$modal.loading("加载中...")
					checkComplete(this.detailData).then(res => {
						this.$modal.closeLoading()
						if (res.code == 200) {
							this.$modal.msgSuccess("盘点成功")
						} else {
							res.msg && this.$modal.confirmClose(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
.table-wrap {
	width: 100%;
	background-color: #fff;
	min-height: 300rpx;
}

.table {
	width: fit-content;
	min-width: 100%;
}

.table-header {
	display: flex;
	background-color: #E4F0F5;
	border-bottom: 1px solid #DCE5F1;
	position: sticky;
	top: 0;
	z-index: 1;
}

.table-body {
	background-color: #fff;
}

.tr {
	display: flex;
	border-bottom: 1px solid #DCE5F1;
	&:nth-child(even) {
		background-color: rgba(228, 240, 245, 0.2);
	}
}

.th, .td {
	padding: 16rpx 8rpx;
	font-size: 24rpx;
	color: #556B85;
	text-align: center;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	word-break: break-all;
	border-right: 1px solid #DCE5F1;
}

.th {
	font-weight: bold;
}

.input-cell {
	padding: 8rpx;
}

.qty-input, .text-input {
	width: 100%;
	height: 56rpx;
	background-color: #fff;
	border: 1px solid #dcdfe6;
	border-radius: 4rpx;
	padding: 0 8rpx;
	font-size: 24rpx;
}

.qty-input {
	text-align: center;
}

.text-input {
	text-align: left;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
	background: #fff;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.disabled {
	opacity: 0.6;
	pointer-events: none;
}
</style>